<template>
	<div>
		<div class="page has-navbar difference" v-nav="{hideNavbar: true}">
			<form @submit.prevent="nextStep">

				<von-header theme="assertive">
					<button class="button button-icon ion-ios-arrow-back" type="button" slot="left" @click="$router.back('/desk')"></button>
					<span slot="title">编辑车辆</span>
					<button class="button button-icon" slot="right" type="submit">下一步</button>
				</von-header>
				<div class="page-content padding-top">

					<list>
						<input type="hidden" name="marketId" v-model="marketId" required>
						<input type="hidden" name="userId" v-model="userId" required>

						<item class="y-item item-icon-right" @click.native="showShop()" v-if="shop == ''">
							<span class="item-title"><span class="red">*</span>店铺</span>
							<input type="text" class="y-item-input" name="" v-model="shopName" placeholder="请选择店铺" readonly required>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							<input type="hidden" name="shopId" v-model="shopId" required/>
						</item>
						<input type="hidden" name="shopId" v-model="shopId" v-else="shop == ''">
						<item class="y-item item-icon-right" @click.native="showRegion()">
							<span class="item-title">车场区域</span>
							<input type="text" class="y-item-input" name="" v-model="regionName" placeholder="请选择车场区域" readonly>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							<input type="hidden" name="regionId" v-model="region" />
						</item>
						<item class="y-item" >
						  <div style="width: 100%; overflow: hidden; position: relative;" >
							<span class="item-title"><span class="red">*</span>车架号</span>
							<input type="text" class="y-item-input" name="carVin" AUTOCOMPLETE="off" v-model="carVin" placeholder="请填写17位字母数字组成的编码" pattern="^([0-9A-Z]){17}$" onkeyup="this.value=this.value.replace(/\W/g,'')" onafterpaste="this.value=this.value.replace(/\W/g,'')" maxlength = 17 required>
							
							<input type="file" ref="fileImg" @change="fileFn" accept="image/*" class="none" />
							</div>
							<span class="y-item-note"><i @click="fileClick" class="ion-android-camera" style="font-size: 32px; color: #FF6816;"></i></span>
						</item>
						<item class="y-item item-icon-right" @click.native="showBrand()">
							<span class="item-title"><span class="red">*</span>品牌车系</span>
							<input type="text" class="y-item-input" name="" :value="brandName+seriesName+modelName" placeholder="请选择车辆" readonly required>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							<input type="hidden" name="brandId" v-model="brandId" required/>
							<input type="hidden" name="seriesId" v-model="seriesId" required/>
							<input type="hidden" name="modelId" v-model="modelId" required/>
						</item>
						<item class="y-item">
							<span class="item-title"><span class="red">*</span>宣传标题</span>
							<input type="text" class="y-item-input" name="carTitle" v-model="carTitle" placeholder="请填写宣传标题" required>
						</item>
						<item class="y-item">
							<span class="item-title">行驶里程</span>
							<input type="number" class="y-item-input"  name="carMileage" @input="mileage" v-model="carMileage" placeholder="请填写公理数" step="0.01">
							<span class="y-item-note">{{gonglis}}</span>
						</item>

						<item class="y-item item-icon-right" @click.native="showCarLicenceStatus()">
							<span class="item-title">是否已上牌</span>
							<input type="text" class="y-item-input" name="" v-model="carLicenceStatusName" placeholder="请选择" readonly>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							<input type="hidden" name="carLicenceState" v-model="carLicenceState" />
						</item>
						<div v-if="carLicenceState == 1">
							<item class="y-item item-icon-right">
								<span class="item-title"><span class="red">*</span>首次上牌年月</span>
								<input type="text" class="y-item-input" name="carLicenceDate" v-model="carLicenceDate" placeholder="请选择上牌日期" readonly required>
								<input type="month" class="y-item-input" :max="nowMonth" v-model="carLicenceDate" required>
								<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							</item>

							<!--<item class="y-item item-icon-right">
          <span class="item-title">出厂年月</span>
          <input type="month" class="y-item-input" name="" v-model="carFacotryDate" >
          <input type="text" class="y-item-input" name="carFacotryDate" v-model="carFacotryDate" placeholder="请选择出厂年月" readonly >
          <i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
        </item>-->

							<item class="y-item item-icon-right">
								<span class="item-title">年审日期</span>
								<input type="text" class="y-item-input" name="carValidateDate" v-model="carValidateDate" placeholder="请选择年审日期" readonly>
								<input type="month" class="y-item-input" name="" v-model="carValidateDate">
								<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							</item>
							<div class="item item-borderless item-toggle von-toggle">
								<div class="hairline-top"></div>
								<span>商业险到期</span>
								<label class="toggle toggle-balanced">
									<input type="checkbox" v-model="carBusinessInsuranceDateTrue">
									<div class="track">
										<div class="handle"></div>
									</div>
								</label>
								<div class="hairline-bottom"></div>
							</div>
							<item class="y-item item-icon-right" v-if="!carBusinessInsuranceDateTrue">
								<span class="item-title">商业险日期</span>
								<input type="text" class="y-item-input" name="carBusinessInsuranceDate" v-model="carBusinessInsuranceDate" placeholder="请选择商业险日期" readonly>
								<input type="month" class="y-item-input" name="" v-model="carBusinessInsuranceDate">
								<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							</item>

							<item class="y-item item-icon-right">
								<span class="item-title">交强险日期</span>
								<input type="text" class="y-item-input" name="carForceInsuranceDate" v-model="carForceInsuranceDate" placeholder="请选择交强险日期" readonly>
								<input type="month" class="y-item-input" name="" v-model="carForceInsuranceDate">
								<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							</item>
							<!--<item class="y-item item-icon-right">
          <span class="item-title">车船税有效期</span>
          <input type="text" class="y-item-input" name="carVehicletaxDate" v-model="carVehicletaxDate" placeholder="请选择车船税有截止效期" readonly >
          <input type="month" class="y-item-input" name="" v-model="carVehicletaxDate">
          <i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
        </item>-->
						</div>
						<input type="hidden" v-else value="1900-01-01" name="carLicenceDate" >
						<item class="y-item item-icon-right" @click.native="showCarKeyNum()">
							<span class="item-title">钥匙数量</span>
							<input type="text" class="y-item-input" name="" v-model="carKeyNumName" placeholder="请选择钥匙数量" readonly>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							<input type="hidden" v-model="carKeyNum" name="carKeyNum" />
						</item>

						<item class="y-item item-icon-right" @click.native="showCarOutColor()">
							<span class="item-title"><span class="red">*</span>外观颜色</span>
							<input type="text" class="y-item-input" name="carOutColor" v-model="carOutColor" placeholder="请选择外观颜色" readonly required>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
						</item>

						<item class="y-item item-icon-right" @click.native="showCarInColor()">
							<span class="item-title">内饰颜色</span>
							<input type="text" class="y-item-input" name="carInColor" v-model="carInColor" placeholder="请选择内饰颜色" readonly>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
						</item>

						<item class="y-item item-icon-right" @click.native="showCarType()">
							<span class="item-title">车身类型</span>
							<input type="text" class="y-item-input" name="" v-model="carTypeName" placeholder="请选择车身类型" readonly>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							<input type="hidden" name="carTypeId" v-model.number="carTypeId" />
						</item>

						<item class="y-item item-icon-right" @click.native="showGearbox()">
							<span class="item-title">变速箱</span>
							<input type="text" class="y-item-input" name="carGearbox" v-model="carGearbox" placeholder="请选择变速箱" readonly>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
						</item>

						<!-- <item class="y-item">
							<span class="item-title">车门数量</span>
							<input type="number" class="y-item-input" name="carDoorNum" oninput="if(value.length>2)value=value.slice(0,2)" v-model="carDoorNum" placeholder="请输入车门数量">
							<span class="y-item-note">门</span>
						</item> -->
						<item class="y-item">
							<span class="item-title">过户次数</span>
							<input type="number" class="y-item-input" name="carTransferNum" oninput="if(value.length>2)value=value.slice(0,2)" v-model="carTransferNum" placeholder="请输入过户次数">
							<span class="y-item-note">次</span>
						</item>

						<item class="y-item ">
							<span class="item-title"><span class="red">*</span>排量</span>
							<input type="number" class="y-item-input" name="carDisplacement" v-model="carDisplacement" required="required" placeholder="请输入排量" step="0.1">
							<span class="y-item-note">{{carTurbo ? 'T' : 'L'}}</span>
							<!-- <input type="hidden" name="carDisplacement" v-model="carDisp"> -->
						</item>
						<div class="item item-borderless item-toggle von-toggle">
							<div class="hairline-top"></div>
							<span>涡轮增压</span>
							<label class="toggle toggle-balanced">
            <input type="checkbox" v-model="carTurbo">
            <div class="track">
              <div class="handle"></div>
            </div>
          </label>
							<input type="hidden" name="carInletModel" :value="carTurbo?'T':'L'">
							<div class="hairline-bottom"></div>
						</div>
						<div class="item item-borderless item-toggle von-toggle">
							<div class="hairline-top"></div>
							<span>延保服务</span>
							<label class="toggle toggle-balanced">
            <input type="checkbox" v-model="carExtendedWarranty">
            <div class="track">
              <div class="handle"></div>
            </div>
          </label>
							<div class="hairline-bottom"></div>
						</div>
						<input type="hidden" name="carExtendedWarranty" :value="carExtendedWarranty?1:0">
						<div class="item item-borderless item-toggle von-toggle">
							<div class="hairline-top"></div>
							<span>金融服务</span>
							<label class="toggle toggle-balanced">
            <input type="checkbox" v-model="carFinanceService">
            <div class="track">
              <div class="handle"></div>
            </div>
          </label>
							<div class="hairline-bottom"></div>
						</div>
						<input type="hidden" name="carFinanceService" :value="carFinanceService?1:0">
						<!-- 				<item class="y-item item-icon-right" @click.native="saleDealUserIdFn()">
          <span class="item-title">销售员工</span>
          <input type="text" class="y-item-input" v-model="getJson.getParams.saleDealUserId.name" placeholder="请选择销售员工" readonly >
          <input type="hidden" name="saleUserId" v-model="getJson.getParams.saleDealUserId.id" />
          <i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
        </item> -->
						<item class="y-item item-icon-right" @click.native="carPurposeFn()">
							<span class="item-title">车辆用途</span>
							<input type="text" readonly class="y-item-input" :value="carPurpose | filterCarPurpose" placeholder="请选择车辆用途" required="required" />
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							<input type="hidden" name="carPurpose" v-model="carPurpose" />
						</item>
						<item class="y-item item-icon-right" @click.native="showStaff()">
							<span class="item-title">销售员工</span>
							<input type="text" class="y-item-input" name="" v-model="staffName" placeholder="请选择销售员工" readonly>
							<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i>
							<input type="hidden" name="saleUserId" v-model="staffId" />
						</item>
						<!--         <item class="y-item">
          <span class="item-title">新车指导价</span>
          <input type="number" class="y-item-input" name="carGuidePrice" v-model="carGuidePrice" placeholder="请填写新车指导价" step="0.01">
          <span class="y-item-note">万元</span>
        </item> -->
						<div class="item item-borderless item-toggle von-toggle">
							<div class="hairline-top"></div>
							<span>是否面议</span>
							<label class="toggle toggle-balanced">
            <input type="checkbox" v-model="discussPersonally">
            <div class="track">
              <div class="handle"></div>
            </div>
          </label>
							<div class="hairline-bottom"></div>
						</div>
						<item class="y-item" v-if="!discussPersonally">
							<span class="item-title"><span class="red">*</span>零售价</span>
							<input type="number" class="y-item-input" v-model="carRetail" required placeholder="请填写零售价" step="0.01">
							<span class="y-item-note">万元</span>
						</item>
						<input type="hidden" name="carRetailPrice" v-model="carRetailPrice">

						<!--         <item class="y-item">
          <span class="item-title">展厅价</span>
          <input type="number" class="y-item-input" name="carShowPrice" v-model="carShowPrice" placeholder="请填写展厅价" step="0.01" >
          <span class="y-item-note">万元</span>
        </item>

        <item class="y-item">
          <span class="item-title">网络价</span>
          <input type="number" class="y-item-input" name="carNetworkPrice" v-model="carNetworkPrice" placeholder="请填写网络价" step="0.01" >
          <span class="y-item-note">万元</span>
        </item>

        <item class="y-item">
          <span class="item-title">黄色预警库龄</span>
          <input type="number" class="y-item-input" name="carYellowAge" v-model="carYellowAge" placeholder="请填写黄色预警库龄">
          <span class="y-item-note">天</span>
        </item>

        <item class="y-item">
          <span class="item-title">红色预警库龄</span>
          <input type="number" class="y-item-input" name="carRedAge" v-model="carRedAge" placeholder="请填写红色预警库龄">
          <span class="y-item-note">天</span>
        </item> -->


					</list>
				</div>
			</form>
		</div>
		<transition name="bottom" v-for="(item,index) in getJson.paramsIs">
			<modal :paramsIs="getJson.paramsIs" :itemIndex="index" />
		</transition>
        <!-- <div :class="isbottoms">
        <div class="footer">
           <h1>驳回原因<i :class="icons" @click="switchs" style="color: #DDD; padding-left: 5px;"></i></h1>
        </div>
        <p :class="judge">驳回入库申请：</p>
        </div>
         -->
		 <on-reject></on-reject>

	</div>
  
</template>
<script>
	
	import regionModal from '../add/region.vue'
	import carLicenceStatusModal from '../add/carLicenceStatus.vue'
	import carKeyNumModal from '../add/carKeyNum.vue'
	import carOutColorModal from '../add/carOutColor.vue'
	import carInColorModal from '../add/carInColor.vue'
	import gearboxModal from '../add/gearbox.vue'
	import carTypeModal from '../add/carType.vue'
	import brandModal from '../add/brand.vue'
	import shopModal from '../add/shop.vue'
	import staffModal from '../add/staff.vue'
	import { bus } from 'bus.js'
	import onReject from 'src/assembly/reject';
	import modal from 'src/assembly/modalList.vue'
	let watchChange 
	export default {
		components: {
			modal,
			onReject
		},
		data() {
			return {
                isbottoms: 'nobottoms',
                judge: 'noreason',
                iconSwitch: false,
                icons: 'icon ion-ios-arrow-up',
				gongli: '公里',
				ortrue: false,
				carBusinessInsuranceDateTrue:true,
				regionModal: null,
				carLicenceStatusModal: null,
				carKeyNumModal: null,
				carOutColorModal: null,
				carInColorModal: null,
				gearboxModal: null,
				carTypeModal: null,
				brandModal: null,
				shopModal: null,
				staffModal: null,
				marketId: sess.get('userSession').marketId,
				shopId: sess.get('userSession').shopId || '',
				userId: sess.get('userSession').userId,
				shop: sess.get('userSession').shopId || '',
				shopName: '',
				carFinanceService: false,
				carExtendedWarranty: false,
				carPurpose:'',
				regionName: '',
				region: '',
				brandName: '',
				seriesName: '',
				modelName: '',
				brandId: '',
				seriesId: '',
				modelId: '',
				carTitle: '',
				carVin: '',
				carMileage: '0',
				carLicenceStatusName: '已上牌',
				carLicenceState: '1',
				carLicenceDate: '',
				carFacotryDate: '',
				carValidateDate: '',
				carVehicletaxDate: '',
				carBusinessInsuranceDate: '',
				carForceInsuranceDate: '',
				carKeyNumName: '',
				carKeyNum: '',
				carOutColor: '',
				carInColor: '',
				carTypeName: '',
				carTypeId: 20,
				staffName: '',
				staffId: '',
				carGearbox: '',
				carDoorNum: '',
				carTransferNum: '',
				carDisplacement: '',
				carTurbo: false,
				discussPersonally: false,
				carGuidePrice: '',
				// carRetailPrice:'',
				carRetail: '',
				carShowPrice: '',
				carNetworkPrice: '',
				carYellowAge: '30',
				carRedAge: '40',
				carRemark: '',
				getJson: {
					getParams: {
						saleDealUserId: {
							name: '',
							id: ''
						}
					},
					paramsIs: [],
					params: {
						saleDealUserId: ''
					}
				},
				backfill: {},
				carConfIds: [],

			}
		},
		mounted() {
			// console.log(this.gongli, 'hahahahahha');
			$modal.fromComponent(shopModal, {
				title: '选择店铺',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.shopModal = modal;
			});

			$modal.fromComponent(regionModal, {
				title: '车场区域',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.regionModal = modal;
			});

			$modal.fromComponent(carLicenceStatusModal, {
				title: '是否上牌',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.carLicenceStatusModal = modal;
			});

			$modal.fromComponent(carKeyNumModal, {
				title: '钥匙数量',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.carKeyNumModal = modal;
			});

			$modal.fromComponent(carOutColorModal, {
				title: '外观颜色',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.carOutColorModal = modal;
			});

			$modal.fromComponent(carInColorModal, {
				title: '内饰颜色',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.carInColorModal = modal;
			});

			$modal.fromComponent(carTypeModal, {
				title: '车身类型',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.carTypeModal = modal;
			});

			$modal.fromComponent(gearboxModal, {
				title: '变速箱',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.gearboxModal = modal;
			});

			$modal.fromComponent(brandModal, {
				title: '选择品牌',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.brandModal = modal;
			});

			$modal.fromComponent(staffModal, {
				title: '选择销售',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.staffModal = modal;
			});
			this.modelIdWatch()

		},
		created() {
			if(this.$route.query) {
				this.carVin = this.$route.query.carVin || ''
			}
			bus.$off('region')
			bus.$on('region', (text) => {
				this.region = text;
				this.regionModal.hide();
			});
			bus.$off('regionName')
			bus.$on('regionName', (text) => {
				this.regionName = text
			});
			bus.$off('carLicenceStatus')
			bus.$on('carLicenceStatus', (text) => {
				this.carLicenceState = text;
				this.carLicenceStatusModal.hide();
			});
			bus.$off('carLicenceStatusName')
			bus.$on('carLicenceStatusName', (text) => {
				this.carLicenceStatusName = text
			});
			bus.$off('carKeyNum')
			bus.$on('carKeyNum', (text) => {
				this.carKeyNum = text;
				this.carKeyNumModal.hide();
			});
			bus.$off('carKeyNumName')
			bus.$on('carKeyNumName', (text) => {
				this.carKeyNumName = text
			});
			bus.$off('carOutColor')
			bus.$on('carOutColor', (text) => {
				this.carOutColor = text;
				this.carOutColorModal.hide();
			});
			bus.$off('carInColor')
			bus.$on('carInColor', (text) => {
				this.carInColor = text;
				this.carInColorModal.hide();
			});
			bus.$off('carTypeId')
			bus.$on('carTypeId', (text) => {
				this.carTypeId = text;
				this.carTypeModal.hide();
			});
			bus.$off('carTypeName')
			bus.$on('carTypeName', (text) => {
				this.carTypeName = text
			});
			bus.$off('gearbox')
			bus.$on('gearbox', (text) => {
				this.carGearbox = text;
				this.gearboxModal.hide();
			});
			bus.$off('brandId')
			bus.$on('brandId', (text) => {
				this.brandId = text;

			});
			bus.$off('brandName')
			bus.$on('brandName', (text) => {
				this.brandName = text;
			});
			bus.$off('seriesId')
			bus.$on('seriesId', (text) => {
				this.seriesId = text;
			});
			bus.$off('seriesName')
			bus.$on('seriesName', (text) => {
				this.seriesName = text;
			});
			bus.$off('modelId')
			bus.$on('modelId', (text) => {
				this.modelId = text;
				this.brandModal.hide();
			});
			bus.$off('modelName')
			bus.$on('modelName', (text) => {
				this.modelName = text;
				this.carTitle = this.brandName + this.seriesName + this.modelName
			});
			bus.$off('shopId')
			bus.$on('shopId', (text) => {
				this.shopId = text;
				this.shopModal.hide();
			});
			bus.$off('shopName')
			bus.$on('shopName', (text) => {
				this.shopName = text;
			});
			bus.$off('staffId')
			bus.$on('staffId', (text) => {
				this.staffId = text;
				this.staffModal.hide();
			});
			bus.$off('staffName')
			bus.$on('staffName', (text) => {
				this.staffName = text;
			});

			bus.$off('saleDealUserId')
			bus.$on('saleDealUserId', (index) => {
				this.getJson.getParams.saleDealUserId.name = this.getJson.paramsIs[0].list[index].name
				this.getJson.getParams.saleDealUserId.id = this.getJson.paramsIs[0].list[index].id
				this.getJson.paramsIs = []
			})
			bus.$off('modelChoice')
			bus.$on('modelChoice', (index) => {
				this.backfill = this.getJson.paramsIs[0].list[index].id
				this.getJson.paramsIs = []
				this.backfillFn(this.backfill)
			})
			bus.$off('carPurposeName')
			bus.$on('carPurposeName', index => {
				this.carPurpose = this.getJson.paramsIs[0].list[index].id
				this.getJson.paramsIs = []
			})

		},
		destroyed() {
			if(this.regionModal)
				$modal.destroy(this.regionModal)

			if(this.carLicenceStatusModal)
				$modal.destroy(this.carLicenceStatusModal)

			if(this.carKeyNumModal)
				$modal.destroy(this.carKeyNumModal)

			if(this.carOutColorModal)
				$modal.destroy(this.carOutColorModal)

			if(this.carInColorModal)
				$modal.destroy(this.carInColorModal)

			if(this.carTypeModal)
				$modal.destroy(this.carTypeModal)

			if(this.gearboxModal)
				$modal.destroy(this.gearboxModal)

			if(this.brandModal)
				$modal.destroy(this.brandModal)

			if(this.shopModal)
				$modal.destroy(this.shopModal)

			if(this.staffModal)
				$modal.destroy(this.staffModal)
		},
		methods: {
            switchs () {
                this.iconSwitch = ! this.iconSwitch;
                if (!this.iconSwitch) {
                    this.icons = 'icon ion-ios-arrow-down';
                    this.judge = 'noreason';
                    this.isbottoms = 'nobottoms';
                } else {
                    this.icons = 'icon ion-ios-arrow-up';
                    this.judge = 'reason';
                    this.isbottoms = 'bottoms';
                }
            },
			// 里程最多輸入4位數
			mileage () {
				if (this.carMileage.search(/^\d*(?:\.\d{0,4})?$/)==-1) {
					this.carMileage=(this.value2)?this.value2:''
				} else {
					this.value2=this.carMileage;
				}
			},
			carPurposeFn () {
				this.getJson.paramsIs.push({
					list: [{name: '营运', id:1},{name: '非营运', id:2},{name: '营转非', id:3}],
					title: '使用性质',
					emit: 'carPurposeName',
				})
			},
			modelChange() {
				this.carConfIds = []
				console.log(this.backfill.modelConf)
				this.backfill.modelConf.map(item => {
					item.childCarConf.map(itemto => {
						if(itemto.selectedState) {
							this.carConfIds.push(itemto.confId)
						}
					})
				})
				
			},
			modelIdWatch() {
				watchChange = this.$watch('modelId', function () {
					console.log(this.modelId)
					if (this.modelId) {
						this.modelIdChange()
					}
				})
			},
			backfillFn(obj) {
				watchChange()
				this.brandName = obj.brand.brandName
				this.brandId = obj.brand.brandId
				this.seriesName = obj.series.seriesName
				this.seriesId = obj.series.seriesId
				this.modelName = obj.modelName
				this.modelId = obj.modelId
				this.carTitle = `${obj.brand.brandName} ${obj.series.seriesName} ${obj.modelName}`
				this.carDisplacement = obj.modelDisplacement
				this.carTurbo = obj.modelInletModel == 'T' ? true : false
				this.carGearbox = obj.modelGearboxModality
				this.modelChange()
				this.modelIdWatch()
			},
			showRegion() {
				this.regionModal.show();
			},
			showCarLicenceStatus() {
				this.carLicenceStatusModal.show();
			},
			showCarKeyNum() {
				this.carKeyNumModal.show();
			},
			showCarOutColor() {
				this.carOutColorModal.show();
			},
			showCarInColor() {
				this.carInColorModal.show();
			},
			showCarType() {
				this.carTypeModal.show();
			},
			showGearbox() {
				this.gearboxModal.show();
			},
			showBrand() {
				this.brandModal.show();
			},
			showShop() {
				this.shopModal.show();
			},
			showStaff() {
				console.log(this.shopId);
				if(this.shopId == '') {
					$toast.show('请先选择店铺', 2000);
				} else {
					this.staffModal.show();
				}

			},
			//    saleDealUserIdFn() {

			// 	window.axios.get(baseUrl + '/controller/getUserList', {
			// 		params: {
			// 			shopId: this.shopId
			// 		}
			// 	}).then((res) => {
			// 		this.getJson.paramsIs.push({
			// 			list: [],
			// 			title: '销售员工',
			// 			emit: 'saleDealUserId',
			// 		})
			// 		for(let item of res.data.result) {
			// 			this.getJson.paramsIs[0].list.push({
			// 				name: item.userName,
			// 				id: item.userId
			// 			})
			// 		}
			// 	})

			// },
			nextStep(event) {
				if(this.shopId == '') {
					$toast.show('请选择店铺', 2000);
					return false
				}
				if(this.modelId == '') {
					$toast.show('请选择车型', 2000);
					return false
				}
				if(this.carOutColor == '') {
					$toast.show('请选择车辆颜色', 2000);
					return false
				}
				// if (this.staffId == '') {
				//   $toast.show('请选择销售员工',2000);
				//   return false
				// }
				var formData = new FormData(event.target);
				let carFuels
				if(this.backfill.modelFuelRoz) {
					if(this.backfill.modelFuelRoz.indexOf('汽油') != -1) {
						carFuels = '汽油'
					} else if(this.backfill.modelFuelRoz.indexOf('柴油') != -1) {
						carFuels = '柴油'
					} else if(this.backfill.modelFuelRoz.indexOf('电动') != -1) {
						carFuels = '电动'
					} else if(this.backfill.modelFuelRoz.indexOf('混合动力') != -1) {
						carFuels = '混合动力'
					} else {
						carFuels = ''
					}
					// formData.append('carEnviron', this.backfill.modelEnviron)
					formData.append('carFuel', carFuels)
					formData.append('carConfIds', this.carConfIds)
				}
				axios.post(baseUrl + '/controller/insertCar', formData).then((res) => {
					sess.set('carId', res.data.result.carId);
					sess.set('shopId', res.data.result.shopId);
					sess.set('modelId', res.data.result.modelId);
					$router.forward('/add_step2')
				});
			},
			fileClick() {
				let options = {
          effect: 'scale',
          title: '',
          buttons: [
            {text: 'VIN码拍照'},
            {text: '行驶证拍照'},
          ],
          showClose:true,
        }
      	let popup = $popup.fromTemplate('<p style="margin-bottom: 0; text-align: center;">请选择拍照方式</p>', options)
      	popup.show().then((buttonIndex) => {
          if(buttonIndex===1){
          	this.getInterface = 'driverlicenseocr'
          }else if(buttonIndex===0){
          	this.getInterface = 'generalocr'
          }else{
          	return 
          }
          let u = navigator.userAgent, app = navigator.appVersion; 
					if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
						this.$refs['fileImg'].click()
					}else{
						this.$refs['fileImg'].click()
						this.$refs['fileImg'].click()
					}
        })
			},
			fileFn() {
				var _this = this
				
				var reader = new FileReader();
				reader.readAsDataURL(this.$refs.fileImg.files[0])
				reader.onloadend = function() {
					_this.value = reader.result
					_this.filePost(reader.result.match(/,(\S*)/)[1])

				}

			},
			filePost(Url) {
				let instance = axios.create({
					headers: {
						'Authorization': 'DP92m1bWVrMOm/xAZjfZQqQIhpxhPTEwMTI1NDE4Jms9QUtJRHBZQm1EVGY4YTlkdzQwNHJmSnJzbVdDNE5XVU1iOW9JJmU9MTUyODk1NTg2NCZ0PTE1MjYzNjM4NjMmcj0zODE5NDY0MDUxJnU9NjIzNjMwMzAy',
						'content-type': 'text/json'
					},
				});
				$loading.show('拼命加载中..');
				if(this.getInterface == 'generalocr') {

					instance({
						method: 'post',
						url: 'https://api.youtu.qq.com/youtu/ocrapi/' + this.getInterface,
						data: {

							"app_id": "10125418",
							"image": Url
						}
					}).then(res => {
						$loading.hide();
						this.$refs.fileImg.value = ''
						if(res) {
							res.data.items.map(item => {
								if(item.itemstring.replace(/\s+/g, "").length == 17) {
									this.carVin = item.itemstring.replace(/\s+/g, "")
								}
							})
						}
					}).catch(err => {
						$loading.hide();
						this.$refs.fileImg.value = ''
						setTimeout(() => {
							$toast.show('服务器繁忙,请稍后再试', 2000);
						}, 400)
					})
				} else {
					instance({
						method: 'post',
						url: 'https://api.youtu.qq.com/youtu/ocrapi/' + this.getInterface,
						data: {
							"type": 0,
							"app_id": "10125418",
							"image": Url
						}
					}).then(res => {
						$loading.hide();
						this.$refs.fileImg.value = ''
						if(res) {
							res.data.items.map(item => {
								if(item.itemstring.replace(/\s+/g, "").length == 17) {
									this.carVin = item.itemstring.replace(/\s+/g, "")
								}
							})
						}
					}).catch(err => {
						$loading.hide();
						this.$refs.fileImg.value = ''
						setTimeout(() => {
							alert(456)
							$toast.show('服务器繁忙,请稍后再试', 2000);
						}, 400)

					})
				}
			},
			getModelInfoByVin() {
				axios.get(baseUrl + '/controller/model/getModelInfoByVin', {
					params: {
						vin: this.carVin
					}
				}).then(res => {
					if(res.data.result.length == 1) {
						this.backfill = res.data.result[0]
						this.backfillFn(res.data.result[0])
					} else if(res.data.result.length > 1) {
						this.getJson.paramsIs.push({
							list: [],
							title: '车型选择',
							emit: 'modelChoice',
						})
						for(let item of res.data.result) {
							this.getJson.paramsIs[0].list.push({
								name: `${item.brand.brandName} ${item.series.seriesName} ${item.modelName}`,
								id: item
							})
						}
					} else {
						setTimeout(() => {
							$toast.show('未找到该车型信息,请手动输入', 2000);
						}, 400)
					}

				})
			},
			modelIdChange() {
				window.axios
					.get(baseUrl + '/controller/getModelInfoById', {params: {modelId: this.modelId}})
					.then(res => {
						let obj = res.data.result[0]
						this.carGearbox = obj.modelGearboxModality
						this.carDisplacement = obj.modelDisplacement
						this.carTurbo = obj.modelInletModel == "T" ? true : false
					})
			}
		},
		computed: {
			gonglis: function () {
				if (this.carMileage > 0.1) {
				this.gongli = '万公里';
				return this.gongli;
				} else {
					this.gongli = '公里';
					return this.gongli;
				}
			},
			nowMonth: function() {
				Date.prototype.toLocaleString = function() {
					return this.getFullYear() + "-" + ((this.getMonth() + 1 >= 1 && this.getMonth() + 1 <= 9) ? "0" + (this.getMonth() + 1) : this.getMonth() + 1)
				};
				var unixTimestamp = new Date();
				return unixTimestamp.toLocaleString();
			},
			carDisp: function() {
				if(this.carDisplacement) {
					return parseFloat(this.carDisplacement).toFixed(1) + (this.carTurbo ? 'T' : 'L');
				} else {
					return
				}
			},
			carRetailPrice: function() {
				if(this.discussPersonally) {
					return 0
				} else {
					return this.carRetail
				}
			},

		},
		watch: {
			'carVin' () {

				this.carVin = this.carVin.toUpperCase()
				this.carVin = this.carVin.replace(/\s+/g, "")
				if(this.carVin.length == 17) {
					this.getModelInfoByVin()
				}
			},

			'shopId' () {
				this.staffId = '';
				this.staffName = '';
			},
			'carLicenceDate' () {
				let startDate = parseInt(this.carLicenceDate.slice(0, 4))
				let endDate = this.carLicenceDate.slice(4, 7)
				this.carValidateDate = (startDate + 2) + endDate
				this.carBusinessInsuranceDate = (startDate + 1) + endDate
				this.carForceInsuranceDate = (startDate + 1) + endDate
			},
			
		}
	}
</script>